<template>
  <div class="item-wrap">
    <div class="item" v-for="(it, index) in list" :key="index">
      <div class="left">{{it.text}}</div>
      <div class="right">{{it.total}}</div>
    </div>
  </div>
</template>
<script setup>
defineProps({
  list: {type: Array, default: () => []},
})
</script>
<style scoped lang="scss">
.item-wrap {
  display: flex;
  flex-wrap: wrap;
  .item {
    border: 1px solid #eaf4ff;
    width: 220px;
    height: 60px;
    line-height: 60px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    background-color: #eaf4ff;
    padding: 0 10px;
    display: flex;
    .left {
      flex: 1;
      color: #656D78;
      font-weight: bold;
    }
    .right{
      font-weight: bolder;
      color: var(--colorLeftMenu);
    }
  }
}
</style>